<div class="main-container">
  <div class="row">
    <div fGrid="6" class="free-demo-board">
      <p>
        {{'DEMO.CARD.DESCRIPTION' | translate}}
      </p>
      <hr>
      <h3 class="free-head-title">{{'API-OPTION' | translate}}<span class="symbol component"></span></h3>

      <div class="free-demo-row">
        <h3 class="free-title">free-card</h3>
        <p>{{'DEMO.CARD.CARD' | translate}}</p>
      </div>

      <div class="free-demo-row">
        <h3 class="free-title">free-card-header</h3>
        <p>{{'DEMO.CARD.CARD-HEADER' | translate}}</p>
      </div>

      <div class="free-demo-row">
        <h3 class="free-title">free-card-header-title</h3>
        <p>{{'DEMO.CARD.CARD-TITLE' | translate}}</p>
      </div>

      <div class="free-demo-row">
        <h3 class="free-title">free-card-media</h3>
        <p>{{'DEMO.CARD.CARD-MEDIA' | translate}}</p>
      </div>

      <div class="free-demo-row">
        <h3 class="free-title">free-card-content</h3>
        <p>{{'DEMO.CARD.CARD-CONTENT' | translate}}</p>
      </div>

      <div class="free-demo-row">
        <h3 class="free-title">free-card-footer</h3>
        <p>{{'DEMO.CARD.CARD-FOOTER' | translate}}</p>
      </div>
    </div>

    <div fGrid="6" class="free-demo-board">
      <div class="free-card-board">
        <h3 class="free-toolbar">Import</h3>
        <free-tab-group direction="right" theme="line">
          <free-tab header="CODE">
            <free-code lang="typescript">
              import &#123;CardModule&#125; from 'freeng/freeng';
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>

      <div class="free-card-board">
        <h3 class="free-toolbar">DEFAULT</h3>
        <free-tab-group direction="right" theme="line">
          <free-tab header="PREVIEW">
            <free-card fGrid="8">
              <free-card-header>
                <free-card-header-text>
                  <div class="free-card-title">Title</div>
                  <div class="free-card-text">Subtitle</div>
                </free-card-header-text>
              </free-card-header>
              <free-card-content>
                This is a simple card with plain text. But the card can contain its own page header, footer, list view, image, and any element inside it.
              </free-card-content>
              <free-card-footer>
                <button fButton>cancel</button>
              </free-card-footer>
            </free-card>
          </free-tab>
          <free-tab header="CODE">
            <free-code lang="html">
              &lt;free-card fGrid="8"&gt;
                &lt;free-card-header&gt;
                  &lt;free-card-header-text&gt;
                    &lt;div class="free-card-title"&gt;Title&lt;/div&gt;
                    &lt;div class="free-card-text"&gt;Subtitle&lt;/div&gt;
                  &lt;/free-card-header-text&gt;
                &lt;/free-card-header&gt;
                &lt;free-card-content&gt;
              This is a simple card with plain text. But the card can contain its own page header, footer, list view, image, and any element inside it.
                &lt;/free-card-content&gt;
                &lt;free-card-footer&gt;
                  &lt;button fButton&gt;cancel&lt;/button&gt;
                &lt;/free-card-footer&gt;
              &lt;free-card&gt;
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>

      <div class="free-card-board">
        <h3 class="free-toolbar">MEDIA</h3>
        <free-tab-group direction="right" theme="line">
          <free-tab header="PREVIEW">
            <free-card fGrid="8">
              <free-card-media>
                <free-image src="assets/images/landscape1.jpg"></free-image>
              </free-card-media>
              <free-card-header>
                <free-card-header-text>
                  <div class="free-card-title">Title</div>
                  <div class="free-card-text">Subtitle</div>
                </free-card-header-text>
              </free-card-header>
            </free-card>
            <free-card fGrid="8">
              <free-card-media>
                <free-image src="assets/images/landscape1.jpg"></free-image>
              </free-card-media>
             <free-card-content>
               This is a simple card with plain text. But the card can contain its own page header, footer, list view, image, and any element inside it.
             </free-card-content>
            </free-card>
            <free-card fGrid="8">
              <free-card-media>
                <free-image src="assets/images/landscape1.jpg"></free-image>
              </free-card-media>
              <free-card-header>
                <free-card-header-text>
                  <div class="free-card-title">Title</div>
                  <div class="free-card-text">Subtitle</div>
                </free-card-header-text>
              </free-card-header>
              <free-card-content>
                This is a simple card with plain text. But the card can contain its own page header, footer, list view, image, and any element inside it.
              </free-card-content>
            </free-card>
            <free-card fGrid="8">
              <free-card-media>
                <free-image src="assets/images/landscape1.jpg"></free-image>
              </free-card-media>
              <free-card-content>
                This is a simple card with plain text. But the card can contain its own page header, footer, list view, image, and any element inside it.
              </free-card-content>
              <free-card-footer>
                <button fButton>cancel</button>
              </free-card-footer>
            </free-card>
          </free-tab>
          <free-tab header="CODE">
            <free-code lang="html">
              &lt;free-card fGrid="8"&gt;
                &lt;free-card-media&gt;
                  &lt;free-image src="assets/images/landscape1.jpg"&gt;&lt;/free-image&gt;
                &lt;/free-card-media&gt;
                &lt;free-card-header&gt;
                  &lt;free-card-header-text&gt;
                    &lt;div class="free-card-title"&gt;Title&lt;/div&gt;
                    &lt;div class="free-card-text"&gt;Subtitle&lt;/div&gt;
                  &lt;/free-card-header-text&gt;
                &lt;/free-card-header&gt;
              &lt;/free-card&gt;
              &lt;free-card fGrid="8"&gt;
                &lt;free-card-media&gt;
                  &lt;free-image src="assets/images/landscape1.jpg"&gt;&lt;/free-image&gt;
                &lt;/free-card-media&gt;
                &lt;free-card-content&gt;
              This is a simple card with plain text. But the card can contain its own page header, footer, list view, image, and any element inside it.
                &lt;/free-card-content&gt;
              &lt;/free-card&gt;
              &lt;free-card fGrid="8"&gt;
                &lt;free-card-media&gt;
                  &lt;free-image src="assets/images/landscape1.jpg"&gt;&lt;/free-image&gt;
                &lt;/free-card-media&gt;
                &lt;free-card-header&gt;
                  &lt;free-card-header-text&gt;
                    &lt;div class="free-card-title"&gt;Title&lt;/div&gt;
                    &lt;div class="free-card-text"&gt;Subtitle&lt;/div&gt;
                  &lt;/free-card-header-text&gt;
                &lt;/free-card-header&gt;
                &lt;free-card-content&gt;
              This is a simple card with plain text. But the card can contain its own page header, footer, list view, image, and any element inside it.
                &lt;/free-card-content&gt;
              &lt;/free-card&gt;
              &lt;free-card fGrid="8"&gt;
                &lt;free-card-media&gt;
                  &lt;free-image src="assets/images/landscape1.jpg"&gt;&lt;/free-image&gt;
                &lt;/free-card-media&gt;
                &lt;free-card-content&gt;
              This is a simple card with plain text. But the card can contain its own page header, footer, list view, image, and any element inside it.
                &lt;/free-card-content&gt;
                &lt;free-card-footer&gt;
                  &lt;button fButton&gt;cancel&lt;/button&gt;
                &lt;/free-card-footer&gt;
              &lt;/free-card&gt;
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>

      <div class="free-card-board">
        <h3 class="free-toolbar">Hover Effect</h3>
        <free-tab-group direction="right" theme="line">
          <free-tab header="PREVIEW">
            <free-card fGrid="8" [hover]="true">
              <free-card-header>
                <free-card-header-text>
                  <div class="free-card-title">Title</div>
                  <div class="free-card-text">Subtitle</div>
                </free-card-header-text>
              </free-card-header>
              <free-card-content>
                This is a simple card with plain text. But the card can contain its own page header, footer, list view, image, and any element inside it.
              </free-card-content>
              <free-card-footer>
                <button fButton>cancel</button>
              </free-card-footer>
            </free-card>
          </free-tab>
          <free-tab header="CODE">
            <free-code lang="html">
              &lt;free-card fGrid="8" [hover]="true"&gt;
                &lt;free-card-header&gt;
                  &lt;free-card-header-text&gt;
                    &lt;div class="free-card-title"&gt;Title&lt;/div&gt;
                    &lt;div class="free-card-text"&gt;Subtitle&lt;/div&gt;
                  &lt;/free-card-header-text&gt;
                &lt;/free-card-header&gt;
                &lt;free-card-content&gt;
              This is a simple card with plain text. But the card can contain its own page header, footer, list view, image, and any element inside it.
                &lt;/free-card-content&gt;
                &lt;free-card-footer&gt;
                  &lt;button fButton&gt;cancel&lt;/button&gt;
                &lt;/free-card-footer&gt;
              &lt;free-card&gt;
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>
    </div>

  </div>

  <blockquote>FreeNG - {{'MOTTO' | translate}}</blockquote>
</div>
